<template>
  <a-layout-sider style="padding: 14px" width="124" class="flow-element">
    <a-row>
      <div class="tab">工具</div>
      <a-list :grid="{ gutter: 15, column: 2 }" :data-source="tools">
        <template #renderItem="{ item }">
          <a-list-item>
            <img :src="item.icon" alt="Example Image" />
          </a-list-item>
        </template>
      </a-list>
      <!--      <a-row justify="space-between" align="middle"-->
      <!--        ><a-col :span="12" v-for="tool in tools" :key="tool.type">-->
      <!--          <a-button size="middle" @click="selectTool(tool.type)">-->
      <!--            <template #icon>-->
      <!--              <component :is="tool.icon" />-->
      <!--            </template>-->
      <!--          </a-button> </a-col-->
      <!--      ></a-row>-->
    </a-row>
    <a-row>
      <div class="tab">开始/结束</div>
      <FlowElementList
        :nodeList="commonNodes"
        :belongTo="NodeTypeEnum.Common_Node_Type"
        @setDragInfo="setDragInfo"
      />
    </a-row>
    <a-row>
      <div class="tab">任务</div>
      <FlowElementList
        :nodeList="highNodes"
        :belongTo="NodeTypeEnum.High_Node_Type"
        @setDragInfo="setDragInfo"
      />
    </a-row>
    <a-row>
      <div class="tab">泳道</div>
      <FlowElementList
        :nodeList="laneNodes"
        :belongTo="NodeTypeEnum.Lane_Node_Type"
        @setDragInfo="setDragInfo"
      />
    </a-row>
  </a-layout-sider>
</template>

<script lang="ts" setup>
  import Svgicon from '/@/components/SvgIcon/index.vue';
  import FlowElementList from './FlowElementList.vue';
  import { commonNodes, highNodes, laneNodes } from '/@/config/nodes';
  import { IDragInfo } from '/@/type/index';
  import { ActionsTypeEnum, NodeTypeEnum } from '/@/type/enums';
  import { tools } from '/@/config/tools';

  const emits = defineEmits(['setDragInfo', 'selectTool']);

  function selectTool(type: ActionsTypeEnum) {
    emits('selectTool', type);
  }

  // 设置dragInfo
  function setDragInfo(info: IDragInfo) {
    emits('setDragInfo', info);
  }
</script>
